<template>
  <div class="container">
    <el-radio-group v-model="type">
      <el-radio-button label="脑图" />
      <el-radio-button label="水平树" />
      <el-radio-button label="垂直树" />
      <el-radio-button label="算法1" />
      <el-radio-button label="算法2" />
      <el-radio-button label="算法3" />
      <el-radio-button label="算法4" />
      <el-radio-button label="复刻版" />
      <el-radio-button label="原版" />
    </el-radio-group>
    <div class="drawBox" ref="drawBox"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { init } from "./render";
import useAlgorithm1 from "./algorithm1";
import useAlgorithm2 from "./algorithm2";
import useAlgorithm3 from "./algorithm3";
import useAlgorithm4 from "./algorithm4";
import useAlgorithm5 from "./algorithm5";
import useAlgorithm5Copy from "./algorithm5 copy";
import useMind from "./mind";
import { clear } from './render'
import { treeData4 } from "./treeData"

const {
  generateHorizontalTreePointFn,
  generatreVerticalTreePointFn,
  generateMind
} = useMind()

const drawBox = ref(null);
const type = ref('脑图')
watch(type, () => {
  clear()
  switch (type.value) {
    case '脑图':
      generateMind(treeData4);
      break;
    case '水平树':
      generateHorizontalTreePointFn(lines);
      break;
    case '垂直树':
      generatreVerticalTreePointFn(lines);
      break;
    case '算法1':
      useAlgorithm1();
      break;
    case '算法2':
      useAlgorithm2();
      break;
    case '算法3':
      useAlgorithm3();
      break;
    case '算法4':
      useAlgorithm4();
      break;
    case '复刻版':
      useAlgorithm5();
      break;
    case '原版':
      useAlgorithm5Copy();
      break;
    default:
      break;
  }
})
let lines = [{"id":"11","shape":"association","source":"8","target":"10"},{"id":"9","shape":"association","source":"6","target":"8"},{"id":"15","shape":"association","source":"12","target":"14"},{"id":"13","shape":"association","source":"6","target":"12"},{"id":"7","shape":"association","source":"1","target":"6"},{"id":"23","shape":"association","source":"20","target":"22"},{"id":"21","shape":"association","source":"18","target":"20"},{"id":"19","shape":"association","source":"1","target":"18"},{"id":"29","shape":"association","source":"26","target":"28"},{"id":"27","shape":"association","source":"1","target":"26"},{"id":"35","shape":"association","source":"32","target":"34"},{"id":"33","shape":"association","source":"30","target":"32"},{"id":"31","shape":"association","source":"1","target":"30"},{"id":"37","shape":"association","source":"1","target":"36"},{"id":"55","shape":"association","source":"52","target":"54"},{"id":"53","shape":"association","source":"46","target":"52"},{"id":"47","shape":"association","source":"1","target":"46"},{"id":"63","shape":"association","source":"60","target":"62"},{"id":"61","shape":"association","source":"1","target":"60"},{"id":"113","shape":"association","source":"110","target":"112"},{"id":"111","shape":"association","source":"1","target":"110"},{"id":"131","shape":"association","source":"126","target":"130"},{"id":"127","shape":"association","source":"1","target":"126"},{"id":"247","shape":"association","source":"244","target":"246"},{"id":"245","shape":"association","source":"236","target":"244"},{"id":"237","shape":"association","source":"1","target":"236"},{"id":"253","shape":"association","source":"250","target":"252"},{"id":"255","shape":"association","source":"250","target":"254"},{"id":"251","shape":"association","source":"248","target":"250"},{"id":"249","shape":"association","source":"1","target":"248"},{"id":"269","shape":"association","source":"266","target":"268"},{"id":"267","shape":"association","source":"264","target":"266"},{"id":"273","shape":"association","source":"270","target":"272"},{"id":"271","shape":"association","source":"264","target":"270"},{"id":"277","shape":"association","source":"274","target":"276"},{"id":"275","shape":"association","source":"264","target":"274"},{"id":"265","shape":"association","source":"1","target":"264"},{"id":"287","shape":"association","source":"284","target":"286"},{"id":"285","shape":"association","source":"282","target":"284"},{"id":"283","shape":"association","source":"1","target":"282"},{"id":"319","shape":"association","source":"316","target":"318"},{"id":"317","shape":"association","source":"314","target":"316"},{"id":"315","shape":"association","source":"1","target":"314"}]

onMounted(() => {
  init(drawBox);
  generateMind(treeData4)
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.drawBox {
  border: 1px solid #000;
  width: 800px;
  height: 800px;
}
</style>
